<script>
	let src = 'img/map.jpg';
</script>

<div class="layer">
	{#each { length: 4 } as _, i}<img {src} alt="img" />{/each}
</div>

<style>
	/* body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
  } */

	.layer {
		position: relative;
		width: 360px;
		height: 640px;
		background: rgba(0, 0, 0, 0.1);
		transform-style: preserve-3d;
		transform: rotateX(45deg) rotateZ(-45deg) scale(0.5);
	}
	.layer img {
		position: absolute;
		width: 100%;
		height: 100%;
		transition: 0.5s ease-out;
	}
	.layer:hover img:nth-child(1) {
		transform: translateZ(40px) translateX(40px);
		opacity: 0.4;
	}
	.layer:hover img:nth-child(2) {
		transform: translateZ(80px) translateX(80px);
		opacity: 0.6;
	}
	.layer:hover img:nth-child(3) {
		transform: translateZ(120px) translateX(120px);
		opacity: 0.8;
	}
	.layer:hover img:nth-child(4) {
		transform: translateZ(160px) translateX(160px) rotate(-45deg);
		opacity: 1;
	}
</style>
